<script lang="ts" setup>
import { useTemplateRef } from 'vue';
import xss from 'xss';

defineOptions({
  name: 'SanitizeHtml',
});

const props = defineProps({
  value: {
    type: String,
    default: '',
  },
});

const elRef = useTemplateRef('el');

const sanitizeHtml = (html: string) => {
  return xss(html || '', {
    whiteList: {
      ...(xss as any).whiteList,
      pre: ['class'],
      span: ['style'],
      div: ['style'],
      section: ['style'],
      p: ['style'],
      a: ['target', 'href', 'title', 'style'],
      h1: ['style'],
      h2: ['style'],
      h3: ['style'],
      h4: ['style'],
      h5: ['style'],
      h6: ['style'],
      strong: ['style'],
      ul: ['style'],
      ol: ['style', 'start'],
    },
  });
}

defineExpose({
  getElement: () => elRef.value,
});
</script>

<template>
  <!-- eslint-disable-next-line vue/no-v-html -->
  <div v-html="sanitizeHtml(props.value)" ref="el"></div>
</template>

<style lang="scss" scoped>
</style>
